<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #animated-element {
            width: 200px;
            height: 200px;
            background-color: indigo;
            border-radius: 50%;

        }
    </style>
</head>

<body>
    <div class="container">
        <div id="animated-element"></div>
    </div>
    <div>
        <button id="cancel">Cancel</button>
        <button id="resume">Resume</button>
    </div>
    <script>
        let animationId;
        const element = document.getElementById('animated-element');
        function animate(timestamp) {
            console.log("🚀 ~ animate ~ timestamp:", timestamp);
            const dotIndex = timestamp.toString().indexOf('.');
            const bgColor = `#${timestamp.toString().substring(0,dotIndex).padEnd(6,'0')}`
            // 更新动画状态
            console.log("🚀 ~ animate ~ bgColor:", bgColor)
            const progress = timestamp / 1000; // 转换为秒
            const x = Math.sin(progress) * 100;

            // 更新 DOM
            element.style.transform = `translateX(${x}px) translateY(${x}px)`;
            element.style.background = bgColor;

            // 继续下一帧
            animationId = requestAnimationFrame(animate);
        }

        // 启动动画
        animationId = requestAnimationFrame(animate);

        document.getElementById('cancel').addEventListener('click', () => {
            cancelAnimationFrame(animationId);
        })

        document.getElementById('resume').addEventListener('click', () => {
            animationId = requestAnimationFrame(animate);
        })
    </script>
</body>

</html>